<template>
  <div>
    <Card title="退货记录">
      <div class="operTime">
        <Row class="ptop20">
          <label class="select-return-type dateLabel">时间：</label>
          <DatePicker
            type="datetimerange"
            :options="optionTime"
            format="yyyy-MM-dd HH:mm:ss"
            @on-change="handleChange"
            :value="startTime"
            :editable="false"
            split-panels
            @on-ok="dataTime"
            style="width: 21%"
          ></DatePicker>
          <label class="select-return-type space-left">退款方式：</label>
          <Col class="select-table-item">
            <Select v-model="refundMode" @on-change="handleReturnTypeChange" size="default" clearable>
              <Option
                v-for="item in returnMethodList"
                :value="item.payModeCode"
                :key="item.id"
                :label="item.payModeName"
              ></Option>
            </Select>
          </Col>
          <label class="select-return-type space-left">收银员：</label>
          <Col class="select-table-item">
            <Select v-model="cashierCode" @on-change="handleCashierChange" size="default" clearable>
              <Option
                v-for="item in cashierTableData"
                :value="item.cashierCode"
                :key="item.id"
                :label="item.cashierName"
              ></Option>
            </Select>
          </Col>
          <label class="select-return-type space-left">订单号：</label>
          <Col class="select-table-item order-no-col">
            <Input size="default" style="width: 100%" placeholder="请输入订单号" v-model="orderNo"/>
          </Col>
        </Row>
        <Row class="ptop20">
          <label class="select-return-type">退货单号：</label>
          <Col class="select-table-item order-no-col">
            <Input size="default" style="width: 100%" placeholder="请输入退货单号" v-model="refundNo"/>
          </Col>
          <label class="select-return-type space-left">商品名称：</label>
          <Col class="select-table-item">
            <Input size="default" placeholder="请输入商品名称" v-model="productName"/>
          </Col>
          <label class="select-return-type space-left">商品条码：</label>
          <Col class="select-table-item">
            <Input size="default" placeholder="请输入商品条码" v-model="productBarcode" :maxlength=14 />
          </Col>
          <Button icon="ios-search" type="primary" @click="onSearch" class="query-btn">查询</Button>
          <Button icon="ios-trash-outline" @click="onReset" class="reset-btn" type="warning">重置</Button>
        </Row>
      </div>
      <div class="tabsList">
        <Table
          class="table-all-width"
          :columns="columns"
          :data="data"
          :stripe="true"
          :border="true"
          :loading="Tableloading"
        >
          <template slot-scope="{ row, index }" slot="actions">
            <div>
              <Button icon="ios-eye" @click="showReturnDetail(index)" size="small" type="info">详情</Button>
            </div>
          </template>
        </Table>
        <div style="margin-top: 10px;overflow: hidden">
          <div style="float: right;">
            <Page
              :total="total"
              :current.sync="pageNum"
              :page-size="pageSize"
              show-sizer
              @on-change="changePage"
              @on-page-size-change="changePageSize"
            />
          </div>
        </div>
        <Modal
          :mask-closable="false"
          class="formTop"
          v-model="showDetail"
          title="退款详情"
          width="70%"
        >
          <span style="display: inline-block;width: 100%;height: 30px;line-height: 20px;font-size: 14px;font-weight: bold;">订单号 {{ originOrderDetailInfo.orderNo }}</span>
          <div class="detail-modal-order-info">
            <div class="detail-modal-order-info-item">
              <label class="item-head">订单金额（元）{{ Math.abs(originOrderDetailInfo.billMoney) }}</label>
              <label class="item-cell">门店名称：{{ originOrderDetailInfo.storeName }}</label>
              <label class="item-cell">结账时间：{{ originOrderDetailInfo.payTime }}</label>
              <label class="item-cell">支付方式：{{ originOrderPayModeFristItem.payModeName + originOrderPayModeFristItem.payMoney }}</label>
              <label class="item-cell-warp" v-for="(item, index) in originOrderPayModeList">{{ item.payModeName + item.payMoney }}</label>
            </div>
            <div class="detail-modal-order-info-item">
              <label class="item-head">订单优惠（元）{{ Math.abs(originOrderDetailInfo.preferentialMoney) }}</label>
              <label class="item-cell">会员姓名：{{ originOrderDetailInfo.membershipName }}</label>
              <label class="item-cell">会员电话：{{ originOrderDetailInfo.membershipPhone }}</label>
              <label class="item-cell">操作人：{{ originOrderDetailInfo.cashierName }}</label>
            </div>
            <div class="detail-modal-order-info-item">
              <label class="item-head">订单实收（元）{{ Math.abs(originOrderDetailInfo.realMoney) }}</label>
            </div>
          </div>
          <span style="display: inline-block;width: 100%;height: 30px;line-height: 20px;font-size: 14px;font-weight: bold;margin-top: 20px">退货信息</span>

          <Table
            v-if="showDetail"
            class="table-all-width"
            :columns="detailColumns"
            :data="orderDetailInfo.omsSaleDetailList"
            :stripe="true"
            :border="true"
            :loading="Tableloading"
          >
          </Table>
          <Divider orientation="left">合计</Divider>
          <Row :gutter="16">
            <Col span="4">
              <div class="orderBillMoney">
                <span style="font-size: 14px;">退货数量：</span>
                <strong class="ColorRed" style="font-size: 17px;">{{ orderDetailInfo.saleTotalCount ? orderDetailInfo.saleTotalCount : 0 }}</strong>
              </div>
            </Col>
            <Col span="4">
              <div class="orderBillMoney">
                <span style="font-size: 14px;">实退金额：</span>
                <strong class="ColorRed" style="font-size: 17px;">{{ Math.abs(currentShowDetailOrder.realMoney) }}</strong>
              </div>
            </Col>
          </Row>
          <div slot="footer">
            <Button style="margin-left: 8px" @click="handleClose()">关闭</Button>
          </div>
        </Modal>
      </div>
    </Card>
  </div>
</template>

<script>
import { Format } from "@/assets/util";
import { cashierFindPage } from "@/api/cashier";
import { payModeFindPage } from "@/api/payMode";
import {
  returnOrderFlow,
  returnOrderDetail
} from "@/api/order";
export default {
  data() {
    return {
      Tableloading: true,
      AdShow: false,
      iconImg: "ios-arrow-up",
      refundMode: "",
      returnMethodList: [],
      cashierCode: "",
      cashierName: "",
      cashierTableData: [],
      dateValue: [],
      orderNo: "",
      refundNo: "",
      productName: "",
      productBarcode: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showDetail: false,
      currentShowDetailOrder: {},
      orderDetailInfo: {},
      originOrderDetailInfo: {},
      originOrderPayModeList: [],
      originOrderPayModeFristItem: {},
      optionTime: {
        shortcuts: [
          {
            text: "今日",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);

              start.setTime(start.getTime());
              end.setTime(end.getTime());
              return [start, end];
            }
          },
          {
            text: "昨日",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);
              end.setHours(0, 0, 0, 0);

              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime());
              return [start, end];
            }
          },
          {
            text: "本周",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);

              let weekDay = start.getDay();
              let distance = weekDay - 1;
              if (weekDay === 0) {
                distance = 6;
              }

              start.setTime(start.getTime() - 3600 * 1000 * 24 * distance);
              end.setTime(end.getTime());
              return [start, end];
            }
          },
          {
            text: "本月",
            value() {
              const start = new Date();
              const end = new Date();

              start.setHours(0, 0, 0, 0);

              let firstDayOfMonth = new Date(start.getFullYear(), start.getMonth(), 1);
              firstDayOfMonth.setTime(firstDayOfMonth.getTime());
              return [firstDayOfMonth, end];
            }
          },
          {
            text: "上月",
            value() {
              let nowData = new Date();
              let currentMonth = nowData.getMonth();
              let currentYear = nowData.getFullYear();
              let start = new Date(currentYear, currentMonth - 1, 1);
              let end = new Date(currentYear, currentMonth, 1);
              return [start, end];
            }
          }
        ]
      },
      startTime: [],
      columns: [
        {
          title: "序号",
          type: "index",
          width: 60,
          minWidth: 60,
          align: "center",
          className: "td-index",
          fixed: "left"
        },
        {
          title: "门店编号",
          key: "storeCode",
          width: 150,
          align: "center",
          headerAlign: "center",
          fixed: "left"
        },
        {
          title: "退货单号",
          key: "orderNo",
          width: 180,
          align: "center",
          headerAlign: "center",
          fixed: "left"
        },
        {
          title: "退货时间",
          key: "updateTime",
          width: 150,
          align: "center",
          headerAlign: "center",
          fixed: "left"
        },
        {
          title: "退款金额",
          key: "realMoney",
          width: 130,
          align: "center",
          headerAlign: "center",
          fixed: "left",
          render: (h, params) => {
            return h('span', {}, Math.abs(params.row.realMoney));
          }
        },
        {
          title: "退款方式",
          key: "returnMethod",
          width: 130,
          align: "center",
          headerAlign: "center",
          render: (h, params) => {
            // 退款方式1(微信、支付宝（原路返回）,2会员（原路返回）,3现金退款)
            // let returnMethod = params.row.returnMethod;
            // if (returnMethod === '1') {
            //   return h("p", "微信、支付宝（原路返回）");
            // }
            // else if (returnMethod === '2') {
            //   return h("p", "会员余额（原路返回）");
            // }
            // else if (returnMethod === '3') {
            // return h("p", "现金退款/n支付宝\n微信");
            // }

            // return h('Tooltip', [
            //   h('span', { style: {} }, "现金收款"),
            //   h('span', { slot: 'content', style: {} }, "微信支付宝")
            // ])

            let tempReturnTypeArray = [h('span', { style: { display: 'block', height: '10px' } }, "")];
            for (let i = 0; i < params.row.omsSalePayList.length; i++) {
              let payItem = params.row.omsSalePayList[i];
              let returnDesc = payItem.payModeName + Math.abs(payItem.payMoney);
              tempReturnTypeArray.push(h('span', { style: { display: 'block' } }, returnDesc));
            }
            tempReturnTypeArray.push(h('span', { style: { display: 'block', height: '10px' } }, ""));
            return h('div', tempReturnTypeArray);
          }
        },
        {
          title: "订单号",
          key: "originOrderNo",
          width: 150,
          headerAlign: "center",
          align: "center"
        },
        {
          title: "结账时间",
          key: "payTime",
          width: 150,
          align: "center",
          headerAlign: "center"
        },
        {
          title: "退款原因",
          key: "returnCause",
          width: 150,
          headerAlign: "center",
          align: "center",
          render: (h, params) => {
            // 退款原因(1顾客不想要了,2商品破损,3商品有质量问题,4无理由退换货,5其他原因取causeExplain字段)
            let returnCause = params.row.returnCause;
            if (returnCause === 1) {
              return h("p", "顾客不想要了");
            } else if (returnCause === 2) {
              return h("p", "商品破损");
            } else if (returnCause === 3) {
              return h("p", "商品有质量问题");
            } else if (returnCause === 4) {
              return h("p", "无理由退换货");
            } else if (returnCause === 5) {
              let causeExplain = params.row.causeExplain;
              if (causeExplain) {
                return h("p", causeExplain);
              } else {
                return h("p", "其他原因");
              }
            }
          }
        },
        {
          title: "操作人 ",
          key: "cashierName",
          width: 120,
          headerAlign: "center",
          align: "center"
        },
        {
          title: "操作",
          slot: "actions",
          align: "center",
          width: 120,
          minWidth: 120,
          className: "td-index"
        }
      ],
      detailColumns: [
        {
          title: "操作人 ",
          key: "cashierName",
          width: 120,
          headerAlign: "center",
          align: "center",
          fixed: "left"
        },
        {
          title: "退货单号",
          key: "orderNo",
          width: 180,
          align: "center",
          headerAlign: "center"
        },
        {
          title: "退货时间",
          key: "updateTime",
          width: 150,
          align: "center",
          headerAlign: "center"
        },
        {
          title: "退款方式",
          key: "returnMethod",
          width: 130,
          align: "center",
          headerAlign: "center",
          render: (h, params) => {
            let tempReturnTypeArray = [h('span', { style: { display: 'block', height: '10px' } }, "")];
            for (let i = 0; i < this.orderDetailInfo.omsSalePayList.length; i++) {
              let payItem = this.orderDetailInfo.omsSalePayList[i];
              let returnDesc = payItem.payModeName + Math.abs(payItem.payMoney);
              tempReturnTypeArray.push(h('span', { style: { display: 'block' } }, returnDesc));
            }
            tempReturnTypeArray.push(h('span', { style: { display: 'block', height: '10px' } }, ""));
            return h('div', tempReturnTypeArray);
          }
        },
        {
          title: "退货类型",
          key: "returnType",
          width: 150,
          align: "center",
          headerAlign: "center",
          render: (h, params) => {
            // 1退货退款,2仅退款
            let returnType = this.currentShowDetailOrder.returnType;
            if (returnType === 1) {
              return h("p", "退货退款");
            } else if (returnType === 2) {
              return h("p", "仅退款");
            }
          }
        },
        {
          title: "商品名称",
          key: "productName",
          width: 150,
          align: "center",
          headerAlign: "center",
          render: (h, params) => {
            if (params.row.productNameArray.length == 1) {
              return h("p", params.row.productNameArray[0]);
            }

            return h('div', {
              attrs: {
                class: 'subCol'
              }
            },
            [
              h('div', params.row.productNameArray.map((item, index) => {
                if (params.row.productNameArray.length == index + 1) {
                  return h('p',
                    { style: {
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      margin: '0 -18px',
                      listStyle: 'none',
                      textAlign: 'center',
                      overflowX: 'hidden',
                      height: '48px'
                    } },
                    item);
                }

                return h('p',
                  { style: {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    margin: '0 -18px',
                    listStyle: 'none',
                    textAlign: 'center',
                    borderBottom: '1px solid #ccc',
                    overflowX: 'hidden',
                    height: '48px'
                  } },
                  item);
              }))
            ])
          }
        },
        {
          title: "退货数量",
          key: "saleCount",
          width: 150,
          align: "center",
          headerAlign: "center",
          render: (h, params) => {
            if (params.row.saleCountArray.length == 1) {
              return h("p", params.row.saleCountArray[0]);
            }

            return h('div', {
              attrs: {
                class: 'subCol'
              }
            },
            [
              h('ul', params.row.saleCountArray.map((item, index) => {
                if (params.row.saleCountArray.length == index + 1) {
                  return h('li',
                    { style: {
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      margin: '0 -18px',
                      listStyle: 'none',
                      textAlign: 'center',
                      overflowX: 'hidden',
                      height: '48px'
                    } },
                    item);
                }

                return h('li',
                  { style: {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    margin: '0 -18px',
                    listStyle: 'none',
                    textAlign: 'center',
                    borderBottom: '1px solid #ccc',
                    overflowX: 'hidden',
                    height: '48px'
                  } },
                  item);
              }))
            ])
          }
        },
        {
          title: "实退金额",
          key: "realMoney",
          width: 130,
          align: "center",
          headerAlign: "center",
          render: (h, params) => {
            if (params.row.realMoneyArray.length == 1) {
              return h("p", params.row.realMoneyArray[0]);
            }

            return h('div', {
              attrs: {
                class: 'subCol'
              }
            },
            [
              h('ul', params.row.realMoneyArray.map((item, index) => {
                if (params.row.saleCountArray.length == index + 1) {
                  return h('li',
                    { style: {
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      margin: '0 -18px',
                      listStyle: 'none',
                      textAlign: 'center',
                      overflowX: 'hidden',
                      height: '48px'
                    } },
                    item);
                }

                return h('li',
                  { style: {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    margin: '0 -18px',
                    listStyle: 'none',
                    textAlign: 'center',
                    borderBottom: '1px solid #ccc',
                    overflowX: 'hidden',
                    height: '48px'
                  } },
                  item);
              }))
            ])
          }
        },
        {
          title: "退款原因",
          key: "reason",
          width: 150,
          headerAlign: "center",
          align: "center",
          render: (h, params) => {
            // 退款原因(1顾客不想要了,2商品破损,3商品有质量问题,4无理由退换货,5其他原因取causeExplain字段)
            let returnCause = this.currentShowDetailOrder.returnCause;
            if (returnCause === 1) {
              return h("p", "顾客不想要了");
            } else if (returnCause === 2) {
              return h("p", "商品破损");
            } else if (returnCause === 3) {
              return h("p", "商品有质量问题");
            } else if (returnCause === 4) {
              return h("p", "无理由退换货");
            } else if (returnCause === 5) {
              let causeExplain = params.row.causeExplain;
              if (causeExplain) {
                return h("p", causeExplain);
              }
            }
            return h("p", "其他原因");
          }
        }
      ],
      data: []
    };
  },
  methods: {
    init() {
      this.setNormalTime();
      this.queryPayModeList();
    },
    setNormalTime() {
      let newTimeDate = new Date();
      this.startTime = [
        Format(newTimeDate, "yy-MM-dd 00:00:00"),
        Format(newTimeDate, "yy-MM-dd hh:mm:ss")
      ];
      this.dateValue = [
        Format(newTimeDate, "yy-MM-dd 00:00:00"),
        Format(newTimeDate, "yy-MM-dd hh:mm:ss")
      ];
    },
    dataTime() {
      this.queryReturnOrderFlow();
    },
    // 分页
    changePage(pageNum) {
      this.pageNum = pageNum;
      this.query();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1;
      this.query();
    },
    onSearch() {
      this.pageNum = 1;
      this.query();
    },
    // 查询
    query() {
      this.queryReturnOrderFlow();
    },
    onReset() {
      this.setNormalTime();
      this.refundMode = "";
      this.cashierCode = "";
      this.orderNo = "";
      this.productName = "";
      this.productBarcode = "";
      this.onSearch();
    },
    // 触发日历
    handleChange(daterange) {
      this.dateValue = daterange;
    },
    // 退款方式切换
    handleReturnTypeChange(res) {
      console.log('handleReturnTypeChange:', res);
    },
    // 收银员切换
    handleCashierChange(res) {
      console.log('handleCashierChange:', res);
    },
    handleClose() {
      this.showDetail = false;
    },
    // 请求支付方式列表
    async queryPayModeList() {
      const Loading = this.$myLoading();
      let storeCode = this.$store.state.storeInfo.storeCode;
      const { data, status } = await payModeFindPage({ page: 1, pageSize: 100, storeCode: storeCode });
      if (data.code == 200 && status == 200) {
        let tempPayModeList = data.data.list;
        for (let i = 0; i < tempPayModeList.length; i++) {
          let payModeItem = tempPayModeList[i];
          if (payModeItem.payModeName.startsWith('现金') ||
              payModeItem.payModeName.startsWith('支付宝') ||
              payModeItem.payModeName.startsWith('微信') ||
              payModeItem.payModeName.startsWith('会员余额')) {
            this.returnMethodList.push(payModeItem);
          }
        }

        this.closeLoading(Loading);
        this.queryCashierList();
      } else {
        this.closeLoading(Loading);
        this.$Message.error(data.message);
      }
    },
    // 请求收银员列表
    async queryCashierList() {
      const Loading = this.$myLoading();

      let fastQuery = "";
      let page = 1;
      let pageSize = 100;
      let storeCode = this.$store.state.storeInfo.storeCode;
      const { data, status } = await cashierFindPage({
        fastQuery,
        page,
        pageSize,
        storeCode
      });
      if (data.code == 200 && status == 200) {
        this.cashierTableData = data.data.list;

        this.closeLoading(Loading);
        this.queryReturnOrderFlow();
      } else {
        this.closeLoading(Loading);
        this.$Message.error(data.message);
      }
    },
    // 订单列表
    async queryReturnOrderFlow() {
      const Loading = this.$myLoading();
      const item = {
        page: this.pageNum,
        pageSize: this.pageSize,
        startTime: this.dateValue[0],
        endTime: this.dateValue[1],
        refundMode: this.refundMode,
        cashierCode: this.cashierCode,
        orderNo: this.orderNo,
        refundNo: this.refundNo,
        productName: this.productName,
        productBarcode: this.productBarcode
      };
      const { data, status } = await returnOrderFlow(item);
      if (status == 200 && data.code == 200) {
        this.total = data.data.total;
        this.data = data.data.list;
      } else {
        this.$Message.error(data.message);
      }

      this.Tableloading = false;
      this.closeLoading(Loading);
    },
    // 查看订单详情
    showReturnDetail(index) {
      let item = this.data[index];
      this.currentDisplayDetail = item;
      this.currentShowDetailOrder = item;
      this.showDetail = true;
      this.queryOrderDetail(item);
    },
    // 处理详情数据
    disposeReturnOrderData(data) {
      let tempData = data.data;
      // 处理列表数据
      let tempProductNameArr = [];
      let tempReturnSaleCountArr = [];
      let tempRealMoneyArr = [];
      let tempSaleTotalCount = 0;

      if (tempData.omsSaleDetailList.length) {
        for (let i = 0; i < tempData.omsSaleDetailList.length; i++) {
          let omsSaleItem = tempData.omsSaleDetailList[i];
          tempProductNameArr.push(omsSaleItem.productName);
          tempReturnSaleCountArr.push(Math.abs(omsSaleItem.saleCount));
          tempRealMoneyArr.push(Math.abs(omsSaleItem.realMoney));
          tempSaleTotalCount = tempSaleTotalCount + Math.abs(omsSaleItem.saleCount);
        }

        let fristItem = tempData.omsSaleDetailList[0];
        fristItem['productNameArray'] = tempProductNameArr;
        fristItem['saleCountArray'] = tempReturnSaleCountArr;
        fristItem['realMoneyArray'] = tempRealMoneyArr;
        tempData.omsSaleDetailList = [fristItem];
        tempData['saleTotalCount'] = tempSaleTotalCount;
      }
      this.orderDetailInfo = tempData;
    },
    // 查询订单详情
    async queryOrderDetail(item) {
      const Loading = this.$myLoading();
      const { data, status } = await returnOrderDetail({ orderNo: item.orderNo });
      if (status == 200 && data.code == 200) {
        this.disposeReturnOrderData(data);
        // 需要获取原订单和退货订单信息要调两次这个接口
        this.queryOriginOrderDetail(item.originOrderNo);
      } else {
        this.closeLoading(Loading);
        this.currentShowDetailOrder = {};
        this.$Message.error(data.message);
      }
    },
    // 查询原订单详情
    async queryOriginOrderDetail(originOrderNo) {
      const { data, status } = await returnOrderDetail({ orderNo: originOrderNo });
      if (status == 200 && data.code == 200) {
        this.originOrderDetailInfo = data.data;
        // 获取支付列表里的支付方式字段
        let omsSalePayList = data.data.omsSalePayList;
        this.originOrderPayModeFristItem = omsSalePayList[0];

        let tempOriginOrderPayModeList = [];
        for (let i = 1; i < omsSalePayList.length; i++) {
          let item = omsSalePayList[i];
          tempOriginOrderPayModeList.push(item);
        }
        this.originOrderPayModeList = tempOriginOrderPayModeList;
      } else {
        this.currentShowDetailOrder = {};
        this.$Message.error(data.message);
      }

      this.closeLoading(Loading);
    },
    closeLoading(Loading) {
      let timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        Loading && Loading.close();
      }, 300);
    }
  },
  mounted: function() {
    this.init();
  }
};
</script>

<style scoped>
.operTime button {
  margin-left: 15px;
}
.ivu-input-large {
  height: 32px !important;
}
.select-return-type {
  text-align: right;
  line-height: 32px;
  height: 32px !important;
  width: 100px;
  font-size: 14px;
  padding-right: 10px;
  display: inline-block;
  margin-left: 0px;
}
.space-left {
  padding-left: 20px;
}
.dateLabel {
  padding-left: 15px;
}
.select-table-item {
  text-align: left;
  height: 32px !important;
  font-size: 14px;
  display: inline-block;
  width: 10%;
}
.order-no-col {
  width: 21%;
}
.ivu-input {
  height: 32px !important;
}
.tabsList {
  margin-top: 15px;
}
.search-label {
  width: 100px;
  margin-right: 10px;
  text-align: right;
}
.ColorRed {
  color: #f00;
}
.query-btn {
  margin-left: 2.5% !important;
}
.reset-btn {
  margin-left: 1.5% !important;
}
.detail-modal-order-info {
  position: relative;
  display: table;
  width: 90%;
  margin-left: 35px;
}
.detail-modal-order-info-item {
  position: relative;
  display: table-cell;
  width: 17%;
  height: 100px;
  padding: 5px 20px 0px 20px;
}
.item-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: 17px;
  font-weight: bold;
  border: 1px solid #dcdee2;
  border-radius:5px;
}
.item-cell {
  font-size: 14px;
  color: #515a6e;
  position: relative;
  display: block;
  margin-top: 5px;
}
.item-cell-warp {
  font-size: 14px;
  color: #515a6e;
  position: relative;
  display: block;
  margin-left: 70px;
}
</style>
